import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import demo1 from '@/components/demo1'
import demo3 from '@/components/demo3'
import demo4 from '@/components/demo4'
Vue.use(Router)

export default new Router({
	//使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

//注意: 这个功能只在 HTML5 history 模式下可用。
  mode:'history', //
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
      	keepAlive:true
      }
    },
     {
      path: '/demo1',
      name: 'demo1',
      component: demo1
    },
    {
    	path:'/demo3',
    	name: 'demo3',
    	component:demo3,
    	meta:{
    		keepAlive:true
    	}
    },
      {
        path:'/demo4',
        name:'demo4',
        component:demo4
      }

    
  ],
  scrollBehavior(to,from,savedPosition){
  	//保存savedPosition 于meta中
  	to.meta.savedPosition = savedPosition;
  	//复制代码
//scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
  	if(savedPosition){
  		console.log('-------------------------')
  		console.log(savedPosition)
  		console.log('-------------------------')
  		return savedPosition
  		
  	}else{
  		return {x:0,y:0}
  	}
  }
})
